Un poco nuevo para reaccionar y estoy tratando de hacer que una página lineal simple fluya. Cuando se hace clic en el enlace en el componente de inicio de sesión, quiero que vaya a la página Seleccionar sin mostrar la página anterior. En su estado actual, el vínculo simplemente agrega la página Seleccionar sin actualizar nada.
Código de la aplicación:
import Login from "./pages/Login"; import Select from "./pages/Select"; import { createBrowserHistory } from 'history' //import React from "react"; import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; const history = createBrowserHistory() function App() { return ( <div className="fnb"> <Router> <Switch> <Route exact path="/" component={Login} /> <Route exact path="/select" component={Select} /> </Switch> </Router> </div> ); } export default App;Código de inicio de sesión:
import React from "react"; import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; import Select from "./Select"; function Login() { return ( <div> <p> this is the login </p> <Router> <Link to="/select" {window.location.reload();}> go to select page </Link> <Switch> <Route exact path="/select" component={Select}/> </Switch> </Router> </div> ); } export default Login;Seleccionar código:
import React from "react"; function Select() { return ( <div> <header> <p> this is the select </p> </header> </div> ); } export default Select;https://stackoverflow.com/a/49162423/10787450 aquí está la respuesta. Creo que el parámetro exacto en el componente de la aplicación es el problema. Simplemente elimínelo de la ruta.
cambias el código del archivo
Código de la aplicación.
//App code import React from 'react' import { BrowserRouter as Router, Route } from 'react-router-dom' import Login from './pages/Login' import Select from './pages/Select' const App = () => { return ( <Router> <Route exact path='/' component={Login} /> <Route path='/select' component={Select} /> </Router> ) } export default App //Login code import React from 'react' import { Link } from 'react-router-dom' const Login = () => { return ( <div> <p>this is the login</p> <Link to='/select'>go to select page</Link> </div> ) } export default Login //select code. import React from 'react' const Select = () => { return ( <div> <header> <p>this is the select</p> </header> </div> ) } export default Select